<template>
    <div>
        <h2 align="center">科室-添加</h2>
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td align="right">科室名称</td>
                    <td><input type="text" v-model="quertInfo.department" /></td>
                </tr>
                <tr>
                    <td align="right">科室图片</td>
                    <td><input type="file" @change="getphoto"/>
                        <img :src="quertInfo.photo" alt="" width="100px" height="100px">
                    </td>
                </tr>
                <tr>
                    <td align="right">成立日期</td>
                    <td><input type="date" v-model="quertInfo.establish" /></td>
                </tr>
                <tr>
                    <td align="right"></td>
                    <td><input type="button" value="添加"  class="btn btn-primary" @click="ok" /></td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import {ref, reactive,onMounted} from 'vue'
import {useRouter, useRoute} from 'vue-router'
import axios from 'axios';
let router = useRouter()
let route = useRoute()
let quertInfo= reactive({
    
  department: "",
  photo: "",
  establish: "",
  
})
//科室图片上传
const getphoto = (e:any)=>{
    let file = e.target.files[0]
    let formdata= new FormData();
    formdata.append("file",file)
    axios({
        url:"/api/Photo/GetPhoto",
        method:"post",
        data:formdata
    })
    .then((res)=>{
        console.log(res)
        quertInfo.photo = res.data
    })
    .catch((err)=>{
        console.log(err)
    })
}
//添加科室
const ok = ()=>{
    axios({
        url:"/api/Department/DepartAdd",
        method:"post",
        data:quertInfo
    })
    .then((res)=>{
        console.log(res)
        if(res.data==1){
            alert("添加成功")
            router.push("/department")
        }
        else if(res.data==-1)
        {
            alert("该科室已存在")
            
        }
        else{
            alert("添加失败")
        }
    })
}
</script>

<style scoped>

</style>